<template>
  <div>
    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" class="colForm"
             @keyup.enter.native="dataFormSubmit()" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="数据来源">
            <el-select v-model="dataForm.sourceType" disabled>
              <el-option label="ECC统计奖金" value="1"></el-option>
              <el-option label="绩效统计奖金" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否补充">
            <el-switch v-model="dataForm.importFlag" disabled active-text="是" inactive-text="否"
                       active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员编号" prop="ryCode">
            <el-input placeholder="请选择人员" v-model="dataForm.ryCode">
              <el-button slot="append" icon="el-icon-user-solid" @click="addUser()"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="奖金发放日期" prop="ffDate">
            <el-date-picker v-model="dataForm.ffDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                            :picker-options="dateOptions"
                            :readonly="readonly" placeholder=""></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="奖金金额" prop="fee">
            <el-input-number v-model="dataForm.fee" :controls="false" :precision="2"
                             :readonly="readonly"
                             placeholder="保留两位小数"></el-input-number>
            元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ECC奖金分类" prop="jjxFl">
            <el-select :clearable="true" v-model="dataForm.jjxFl" placeholder="请选择" class="xiaLa"
                       :disabled="readonly"
                       style="width: 90%">
              <el-option v-for="(item,index) in  jjflOptions " :key="index" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="奖金项名称" prop="jjxMc">
            <el-input v-model="dataForm.jjxMc" :readonly="readonly"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="是否剔除" prop="status">
            <el-switch v-model="dataForm.status" active-text="是" inactive-text="否"
                       active-value="1" inactive-value="0"></el-switch>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">
                  <el-form-item label="readonly">
                    {{ readonly }}
                  </el-form-item>
                </el-col>-->
      </el-row>
    </el-form>
    <span style="text-align: center;display:block;">
      <el-button @click="emitClose">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      <el-button type="primary" @click="dataFormSubmit(false)" v-show="false">应用</el-button>
    </span>
    <!--  选择人员信息-->
    <UserCommonSelect
      ref="usercomment"
      @submitfy="submitfy"
    ></UserCommonSelect>
  </div>
</template>

<script>
import tichuDetailController from "@/api/jiangjin/tichuDetailController"
import {remote as remoteDict} from "@/api/admin/dict";
import UserCommonSelect from "@/views/hetongrenwu/components/usercomment-select";

export default {
  name: "tichuDetailForm",
  //引用组件
  components: {
    UserCommonSelect
  },
  computed: {
    //默认校验为动态
    dataRule() {
      let a = {}
      return a
    }
  },

  data() {
    return {
      visible: false,
      readonly: false,
      dateOptions: {},
      jjflOptions: [],//所有的ECC奖金项列表
      ryZjbmOptions: [],//所有职务级别，默认选中二级正和二级副，来自于字典表类型为user_zj的项
      dataForm: {
        id: undefined,
        resultId: undefined,
        years: undefined,
        sourceType: '',
        importFlag: '',
        ryCode: '',
        ryName: '',
        ffDate: '',
        fee: undefined,
        jjxFl: '',
        jjxMc: '',
        status: ''
      },
    }
  },
  created() {
    remoteDict("jingjinFenLei").then(response => {
      this.jjflOptions = response.data.data
    })
    remoteDict("user_zj").then(response => {
      this.ryZjbmOptions = response.data.data
    })
  },
  methods: {
    init(id, readonly, sourceType, years) {
      this.dataForm.sourceType = sourceType
      this.dataForm.years = years
      let _this = this
      this.dateOptions = {
        disabledDate(time) {//控制日期类型的选取范围，下面条件为true的不允许选择
          return time.getTime() < new Date(_this.dataForm.years + "-01-01") || time.getTime() > new Date(_this.dataForm.years + "-12-31")
        }
      }
      this.readonly = readonly === undefined ? false : readonly
      if (!id) {
        this.dataForm.importFlag = '1'
      }

      this.$refs['dataFormRef'].resetFields()
      if (id) {
        tichuDetailController.getObj(id).then(({data}) => {
          this.dataForm = data.data
          if (!this.readonly && this.dataForm.importFlag != 1) {//非补充数据不允许修改
            this.readonly = true
          }
        })
      } else {
        //新增时默认添加的属性
        this.dataForm.id = undefined
      }
    },
    // 表单提交
    dataFormSubmit(ifNotClose) {
      this.$refs['dataFormRef'].validate((valid) => {
        this.$message.closeAll()
        if (valid) {
          if (this.dataForm.id) {
            tichuDetailController.putObj(this.dataForm).then(({data}) => {
              this.dataForm = data.data
              this.$message.success('修改成功')
              this.$emit('refreshDataList')
              if (!ifNotClose) {
                this.$emit("close")
              }
            });
          } else {
            tichuDetailController.addObj(this.dataForm).then(({data}) => {
              if (data.data.id != null) {
                this.dataForm = data.data
                this.$message.success('添加成功')
                this.$emit('refreshDataList')
                if (!ifNotClose) {
                  this.$emit("close")
                }
              }
            })
          }
        }
      })
    },
    emitClose() {
      this.$emit("close")
    },
    addUser() {
      this.$nextTick(() => {
        this.$refs.usercomment.init("12", "type", {}, "htcj");
      });
    },
    submitfy(data) {
      console.log(data)
      //this.fayuerendataList = data.tableDataUser;
    },

  }
}
</script>
<style lang="scss" scoped>
/*缩短提示文字行间距*/
.colForm /deep/ .el-form-item__label {
  line-height: 20px !important;
}

/*避免换行不正确*/
.colForm /deep/ .el-row {
  display: flex;
  flex-wrap: wrap;
}
</style>
